<template>
    <div class="cardBox">
        <div class="leftBox">
            <p class="topBox">
                <slot></slot>趋势
                <el-radio-group v-model="index" size="large" v-if="nowType=='beSuger'" @change="reRender">
                    <el-radio-button label="1">餐前血糖</el-radio-button>
                    <el-radio-button label="2">餐后血糖</el-radio-button>
                </el-radio-group>
            </p>

            <div :class="nowType">
            </div>
        </div>
        <div class="rightBox">
            <p class="topBox">
                <slot></slot>记录
                <el-radio-group v-model="gotype" size="large" v-if="nowType=='beSuger'" @change="reRender">
                    <el-radio-button label="beSuger">餐前血糖</el-radio-button>
                    <el-radio-button label="afSuger">餐后血糖</el-radio-button>
                </el-radio-group>
            </p>
            <chartsTable :type="gotype" v-if="gotype=='beSuger'"></chartsTable>
            <chartsTable :type="gotype" v-else-if="gotype=='afSuger'"></chartsTable>
            <chartsTable :type="gotype" v-else></chartsTable>
        </div>

    </div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
import chartsTable from './chartsTable.vue'
import { computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()

onMounted(() => {
    if (index.value == 3) {
        renderBsCharts()

    } else {
        renderCharts()
    }


})
const reRender = () => {
    renderCharts()
}

type props = {
    type: string
}
const typeD = defineProps<props>()
const nowType: string = typeD.type
let gotype = ref(nowType)
const readData: string = 'allHealthRecord'
let index = ref<number>(0)
if (nowType == 'weight') {
    index.value = 0
} else if (nowType == 'beSuger') {
    index.value = 1
} else if (nowType == 'afSuger') {
    index.value = 2
} else if (nowType == 'bs') {
    index.value = 3
} else if (nowType == 'hr') {
    index.value = 4
}
const renderCharts = () => {
    // setInterval(() => {
    //     console.log(store.state[readData]);

    // }, 1000)

    if (!store.state[readData][index.value]) {
        setTimeout(() => {
            renderCharts()
        }, 50);
        return
    } else
        if (store.state[readData][index.value].length <= 0) {
            setTimeout(() => {
                renderCharts()
            }, 50);
            return
        }
    const charts = echarts.init(document.querySelector(`.${nowType}`) as HTMLElement)
    charts.setOption({
        xAxis: {
            type: 'category',
            data: store.state[readData][index.value].map((v: { date: string; }) => v.date.slice(5)).slice(0, 6),
            axisLabel: {
                interval: 0
            }
        },
        yAxis: {
            type: 'value',
            // show: false,
            axisLabel: {
                show: false
            },

        },
        series: [
            {
                data: store.state[readData][index.value].map((v: { value: number; }) => v.value).slice(0, 6),
                type: 'line',
                smooth: true,
                label: {
                    show: true
                }
            }
        ]
    })
}
const renderBsCharts = () => {
    // setInterval(() => {
    //     console.log(store.state[readData]);

    // }, 1000)

    if (!store.state[readData][index.value]) {
        setTimeout(() => {
            renderBsCharts()
        }, 50);
        return
    } else
        if (store.state[readData][index.value].length <= 0) {
            setTimeout(() => {
                renderBsCharts()
            }, 50);
            return
        }
    const charts = echarts.init(document.querySelector(`.${nowType}`) as HTMLElement)
    charts.setOption({

        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['低压', '高压']
        },
        xAxis: {
            type: 'category',
            data: store.state[readData][index.value].map((v: { date: string; }) => v.date.slice(5)).slice(0, 6),
            axisLabel: {
                interval: 0
            }
        },
        yAxis: {
            type: 'value',
            // show: false,
            axisLabel: {
                show: false
            },

        },
        series: [
            {
                name: '低压',
                data: store.state[readData][index.value].map((v: { value: string; }) => Number(v.value.slice(0, 2))).slice(0, 6),
                type: 'line',
                smooth: true,
                label: {
                    show: true
                }
            },
            {
                name: '高压',
                data: store.state[readData][index.value].map((v: { value: string; }) => Number(v.value.slice(4))).slice(0, 6),
                type: 'line',
                smooth: true,
                label: {
                    show: true
                }
            },

        ]
    })
}   
</script>

<style scoped lang='less'>
.cardBox {
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgb(41 132 248 / 10%);
    padding: 20px 0;
    display: flex;
}

.chartsTable {
    margin: auto;
}

.topBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.weight,
.beSuger,
.afSuger,
.bs,
.hr {
    width: 100%;
    height: 350px;
}

.beSugerbackup {
    width: 100%;
    height: 350px;
}

.leftBox,
.rightBox {
    height: 400px;
    width: 50%;
    min-width: 522px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

// .chartBox {
//     height: 350px;
//     width: 500px;
// }

.leftBox {
    border-right: 1px solid #f1f1f1;
}
</style>